<template>

  <div class="view-container sale-statistics-view">

    <div class="info-container">
      <el-tabs
        v-model="activeName"
        style="width:100%"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="按时间周期统计"
          name="timeView"
        />
        <el-tab-pane
          label="按产品统计"
          name="productView"
        />
        <el-tab-pane
          label="按营销地区统计"
          name="positionView"
        />
        <el-tab-pane
          label="按客户统计"
          name="clientView"
        />
        <el-tab-pane
          label="按部门职员统计"
          name="departmentView"
        />
      </el-tabs>

      <form-navi
        :is-cycle="activeName == 'timeView'"
        :screen-data="screenData"
        :type="activeName"
        @change="onChange"
      />

    </div>

    <div class="main-content">

      <component
        :is="activeName"
        ref="refComponent"
        :screen="formData"
      />

    </div>

  </div>

</template>

<script>
import {defineAsyncComponent, defineComponent, inject, reactive, toRefs, onMounted} from 'vue'
import {useRoute} from 'vue-router'

export default defineComponent({
  name: 'Index',
  components: {
    timeView:defineAsyncComponent(()=>import('./modules/timeView/index.vue')),
    productView:defineAsyncComponent(()=>import('./modules/productView/index.vue')),
    positionView:defineAsyncComponent(()=>import('./modules/positionView/index.vue')),
    clientView:defineAsyncComponent(()=>import('./modules/clientView/index.vue')),
    departmentView:defineAsyncComponent(()=>import('./modules/departmentView/index.vue')),
    formNavi: defineAsyncComponent(() => import('../order/modules/form.vue')),
  },
  setup() {
    const route = useRoute()
    const api = inject('api')

    var data = reactive({
      activeName: route.query.tab || 'timeView',
      formData: {
        type: '1',
        statisticsType: '',
        dateType: '',
        productSelectType: '',
        saleAreaType: '',
        headType: '',
        agentSelectType: '',
        selectType: '',
        startTime: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 17),
        endTime: new Date(),
        saleAreaId: 0,
        deptId: 0,
        headId: 0,
        terminalId: 0,
        distributeId: 0,
        agentId: 0,
        productId: 0,
        productLineId: 0,
        amountType: '',
      },
      screenData: null,
      refComponent: null,
    })

    const onChange = (value) => {
      console.log(value)
      if (value.type) {
        data.formData.type = value.type
      }

      data.formData.dateType = value.cycle
      data.formData.selectType = value.charge
      data.formData.startTime = value.start
      data.formData.endTime = value.end
      data.formData.productId = Number(value.productId)
      data.formData.productLineId = Number(value.productLine)
      data.formData.deptId = Number(value.depId)
      data.formData.headId = Number(value.userId)

      data.formData.terminalId = Number(value.terminalId)
      data.formData.distributeId = Number(value.distributeId)
      data.formData.agentId = Number(value.agentId)

      if (data.refComponent){
        data.refComponent.getListData()
      }

    }

    const handleClick = () => {
      data.formData.type = '1'
      if (data.activeName == 'timeView') {
        data.screenData = null
      } else if (data.activeName == 'productView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按产品线统计',
            },
            {
              value: '2',
              label: '按产品统计',
            },
          ],
        }
      } else if (data.activeName == 'positionView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按营销区域统计',
            },
            {
              value: '2',
              label: '按省份统计',
            },
            {
              value: '3',
              label: '按城市统计',
            },
          ],
        }
      } else if (data.activeName == 'clientView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按代理商统计',
            },
            {
              value: '2',
              label: '按兼职统计',
            },
            {
              value: '3',
              label: '按配送商统计',
            },
            {
              value: '4',
              label: '按终端统计',
            },
          ],
        }
      } else if (data.activeName == 'departmentView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按部门统计',
            },
            {
              value: '2',
              label: '按职员统计',
            },
          ],
        }
      }
    }

    onMounted(() => {
      if (data.activeName == 'timeView') {
        data.screenData = null
      } else if (data.activeName == 'productView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按产品线统计',
            },
            {
              value: '2',
              label: '按产品统计',
            },
          ],
        }
      } else if (data.activeName == 'positionView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按营销区域统计',
            },
            {
              value: '2',
              label: '按省份统计',
            },
            {
              value: '3',
              label: '按城市统计',
            },
          ],
        }
      } else if (data.activeName == 'clientView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按代理商统计',
            },
            {
              value: '2',
              label: '按兼职统计',
            },
            {
              value: '3',
              label: '按配送商统计',
            },
            {
              value: '4',
              label: '按终端统计',
            },
          ],
        }
      } else if (data.activeName == 'departmentView') {
        data.screenData = {
          name: 'type',
          value: '1',
          options: [
            {
              value: '1',
              label: '按部门统计',
            },
            {
              value: '2',
              label: '按职员统计',
            },
          ],
        }
      }
    })

    return {
      ...toRefs(data),

      handleClick,
      onChange,
    }
  },
})
</script>

<style lang="scss">
@import "@/style/basics.scss";
.sale-statistics-view {
  .statistics-top {
    display: flex;
    .el-checkbox {
      margin-right: $page-x;
    }
    .price-txt {
      color: $assist-color;
    }
  }
}
</style>
